import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  ref,
  watch,
} from "vue";
import * as echarts from "echarts";

import Base from "../baby/Base";
import createTimer from "../timer";
import initMap from "../map/init";

interface DataType {
  categoryData: {
    [year: string]: {
      name: string;
      value: number;
    }[];
  };
  colors: string[];
  topData: {
    [year: string]: {
      name: string;
      value: [number, number, number];
    }[];
  };
  voltageLevel: string[];
}
const MapChart = defineComponent({
  name: "MapChart",
  props: {
    data: {
      type: Object as PropType<DataType>,
      required: true,
    },
  },

  setup(props, { attrs }) {
    const data = computed(() => props.data);
    const chartRef = ref<null | HTMLDivElement>(null);

// const renderChart = async () => {
//       const oCanvas = document.createElement("canvas");
//       oCanvas.style.position = "absolute";
//       oCanvas.width = chartRef.value!.offsetWidth;
//       oCanvas.height = chartRef.value!.offsetHeight;
//       await initMap();
//       const base =   Base.getInstance(oCanvas);
//       chartRef.value!.appendChild(base.canvas)
//       createTimer();
//     }
    const renderChart = async () => {
      const base =   Base.getInstance();
      chartRef.value!.appendChild(base.canvas)
    }

    

    onMounted(async() => {
      await renderChart();
    });

    // watch(
    //   () => data,
    //   () => renderChart(),
    //   {
    //     deep: true,
    //   }
    // );

    return () => (
      <div
        ref={chartRef}
        class={`w-full h-full ${attrs.class}`}
      ></div>

    );
  },
});
export default MapChart;

